<template>
  <div class="sip-batch-manage">
    <div v-if="!isSuccessShow">
      <div class="prompt">温馨提示：选择迁移的座席只能是普通工号类型，普通工号座席迁移时，该座席的附属工号座席也将同步迁移</div>
      <div class="margin-t-15">
        <div>起止工号／座席名称</div>
        <div class="margin-t-7">
          <el-select v-model="search.type" placeholder="请选择" style="width: 100px; float: left;margin-right: 10px">
            <el-option label="起止工号" value="exten"></el-option>
            <el-option label="座席名称" value="name"></el-option>
          </el-select>
          <div v-if="search.type === 'exten'">
            <el-input style="width: 90px" v-model="search.beginExten" placeholder="请输入开始工号"></el-input> — <el-input style="width: 90px" v-model="search.endExten" placeholder="请输入结束工号"></el-input>
          </div>
          <div v-if="search.type === 'name'">
            <el-input style="width: 200px" v-model="search.combox" placeholder="请输入座席名称"></el-input>
          </div>
        </div>
      </div>
      <div class="margin-t-15 search-btn"><el-button type="primary" @click.stop="searchAgents" class='primary_btn'>查询</el-button></div>
      <el-row class="margin-t-15">
        <div>
          <el-checkbox v-model="checkedAll" @change="checkAllAgents">全部</el-checkbox> <span style="margin-left: 20px">共{{count}}位座席，已选择<span class="main-color">{{num}}</span>位座席</span>
        </div>
        <div class="margin-t-15">
          <el-checkbox-group v-model="checkList" @change="checkAgent">
            <div style="width: 130px; float: left;margin-left: 20px" v-for="item in listData">
              <el-checkbox :label="item.exten">
                <div style="float: left;max-width: 50px;overflow: hidden;text-overflow: ellipsis;">{{item.displayName}}</div><div>[{{item.exten}}]</div>
              </el-checkbox>
            </div>
          </el-checkbox-group>
        </div>
      </el-row>
      <div class="margin-t-15 pbx-row">
        <div>目标PBX选择:</div>
        <el-select v-model="movePbx" placeholder="请选择" class="margin-t-7" style="float: left" @change="pbxInstanceChange">
          <el-option
            v-for="item in pbxList"
            :key="item.PBX"
            :label="item.NickName + '(' + item.PBX + ')'"
            :value="item.PBX">
          </el-option>
        </el-select>
        <span :class = 'pbxInstanceType.type' v-show = 'pbxInstanceType.type && movePbx'>{{pbxInstanceType.title}}</span>
      </div>
    </div>
    <div v-if="isSuccessShow">
      {{userStr}}
    </div>
  </div>
</template>
<script>
  export default {
    name: 'batchMoveAgents',
    data () {
      return {
        isSuccessShow: false, // 是否展示成功后的迁移座席
        pbxInstanceType: { // 目标pbx的状态
          type: '',
          title: ''
        },
        userStr: '', // 迁移成功后的回显
        movePbx: '',
        checkedAll: false, // 是否全选
        count: 0, // 查询的列表总数
        num: 0, // 已选的座席数
        listData: [], // 查询的列表数据
        checkList: [], // 选中的座席
        search: {
          type: 'exten', // 是起止工号还是座席名称
          beginExten: '', // 开始工号
          endExten: '', // 结束工号
          combox: '' // 座席名称
        }
      }
    },
    props: {
    },
    computed: {
      pbxList () {
        let _pbx = this.$store.state.session.account.pbx
        let listData = []
        for (let i = 0; i < _pbx.length; i++) {
          if (_pbx[i].PBX !== this.$store.state.config.callCenter.currentPBX) {
            listData.push(_pbx[i])
          }
        }
        if (listData.length !== 0) {
          this.pbxInstanceChange(listData[0].PBX)
        }
        return listData
      },
      pbx () {
        return this.$store.state.config.callCenter.currentPBX
      }
    },
    methods: {
      resetShow () {
        this.isSuccessShow = false
        this.checkedAll = false
        this.count = 0
        this.num = 0
        this.checkList = []
        this.listData = []
        this.search = {
          type: 'exten', // 是起止工号还是座席名称
          beginExten: '', // 开始工号
          endExten: '', // 结束工号
          combox: '' // 座席名称
        }
      },
      saveDispatch (ids) {
        let data = {
          account: this.$store.state.session.account.account,
          oldPbx: this.pbx,
          pbx: this.movePbx,
          exten: ids
        }
        this.$store.dispatch('moveAgent', data).then(resp => {
          if (resp && resp.success) {
            this.isSuccessShow = true
            this.userStr = ''
            let _str = ''
            if (resp.userList && resp.userList.length !== 0) {
              for (let i = 0; i < resp.userList.length; i++) {
                _str += resp.userList[i].displayName + '[' + resp.userList[i].exten + '] '
              }
              this.userStr = '已将' + _str + '等' + resp.userList.length + '个座席迁移至' + resp.pbx
            }
            this.$emit('batchMoveAgentsSuccess')
          }
        })
      },
      saveBatchMoveAgents () {
        let ids = ''
        if (this.num === 0) {
          this.$message.error(this.$t('report.pleChoseAgent'))
          return
        } else {
          ids = this.checkList.toString()
        }
        if (this.movePbx === '') {
          this.$message.error('请选择目标pbx')
          return
        }
        if (this.pbxInstanceType.type === 'inverse') {
          this.$confirm('前pbx实例已饱和，建议不要再往该pbx上继续添加座席，具体详情请联系运维leader进行咨询', this.$t('public.tip'), {
            confirmButtonText: '继续添加',
            cancelButtonText: this.$t('public.cancel'),
            cancelButtonClass: 'primary_btn',
            confirmButtonClass: 'primary_btn',
            type: 'warning'
          }).then(() => {
            this.saveDispatch(ids)
          })
        } else {
          this.saveDispatch(ids)
        }
      },
      pbxInstanceChange (val) {
        let currentPBX = val
        this.movePbx = val
        if (currentPBX !== '') {
          this.$store.dispatch('checkPbxLoadInfo', {'pbxId': currentPBX}).then((state) => {
            this.pbxInstanceType = state
          })
        }
      },
      stopAgents () {
        let ids = ''
        if (this.checkList.length === 0) {
          this.$message.error(this.$t('report.pleChoseAgent'))
          return
        } else {
          ids = this.checkList.toString()
        }
        let data = {
          account: this.$store.state.session.account.account,
          pbx: this.pbx,
          exten_ids: ids
        }
        console.log(data)
        this.$confirm('确定要停用吗？', this.$t('public.tip'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('batchDisableAgent', data).then((res) => {
            if (res.success) {
              this.$message.success('批量停用座席成功！')
              this.$emit('batchDisableSuccess')
            }
          })
        })
      },
      // 单选择某一个座席
      checkAgent () {
        console.log(this.$store.state.session)
        this.num = this.checkList.length
        if (this.num === this.count) {
          this.checkedAll = true
        } else {
          this.checkedAll = false
        }
      },
      // 全选
      checkAllAgents (value) {
        console.log(value)
        this.checkList = []
        if (value) {
          for (let i = 0; i < this.listData.length; i++) {
            this.checkList.push(this.listData[i].exten)
          }
        }
        this.num = this.checkList.length
      },
      // 查询座席
      searchAgents () {
        let data = {
          pbx: this.pbx,
          status: 'enable',
          limit: -1,
          page: 1
        }
        if (this.search.type === 'exten') {
          data.beginExten = this.search.beginExten
          data.endExten = this.search.endExten
        } else {
          data.combox = this.search.combox
        }
        this.$store.dispatch('queryAgentMigration', data).then(resp => {
          if (resp && resp.success) {
            this.listData = []
            if (resp.list.length !== 0) {
              for (let i = 0; i < resp.list.length; i++) {
                // 剔除附属工号，迁移的时候自动跟随主工号迁移过去
                if (!resp.list[i].inheritedFrom) {
                  this.listData.push(resp.list[i])
                }
              }
              this.count = this.listData.length
            }
          }
        })
      }
    },
    beforeMount () {
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .success
    background #41B27F
  .warning
    background #FF9202
  .important
    background #FF6B6B
  .inverse
    background #A5A5A5
  .pbx-row
    padding-top: 15px
    border-top: 1px dashed #ccc
    clear both
    span
      line-height: 40px;
      margin-left: 10px;
      color: #fff;
      padding: 2px 10px;
  .search-btn
    text-align: right
    margin-top: 10px
    padding-bottom: 20px
    border-bottom: 1px dashed #ccc
  .main-color
    color $c-main
  .pink
    color $c-pink
  .primary_btn
    margin-left 10px
  .prompt
    color $c-prompt
  .margin-t-7
    margin-top 5px
  .margin-t-15
    margin-top 15px
</style>
